<template>
  <div class="bank-card-bind-wrap">
    <div class="process-box">
      <img src="./progress01.png" class="process1" onclick="return false"/>
    </div>

    <!--录入身份证信息-->
    <div class="bank-bind-content" v-if="showPage == 1">
      <div class="photo-upload-box">
        <div class="photo-box">
          <img src="./id_scan.png" class="pic1"/>
          <input type="file" accept="image/*" capture="camera" class="upload-file" @change="changePhoto($event)"/>
        </div>
        <span class="tip1">扫描身份证信息</span>
        <span class="tip2">无原件，可手动输入身份证信息</span>
      </div>

      <div class="bank-real-info">
        <div class="bank-real-name">
          <div class="phone-box">
            <span class="title">真实姓名</span>
            <div class="phone-con">
              <input type="text" class="phone-num" placeholder="请输入真实姓名" maxlength="5" v-model="userName" @input="checkScanName"/>
            </div>
            <img src="../../../images/close.png" class="pic2" v-show="nameIcon == 1" />
          </div>
        </div>

        <div class="bank-real-name">
          <div class="phone-box">
            <span class="title">身份证号</span>
            <div class="phone-con">
              <input type="text" class="phone-num" placeholder="请输入正确的身份证号码" maxlength="18" v-model="userCert"
                     @input="checkScanCert"/>
            </div>
            <img src="../../../images/close.png" class="pic2" v-show="certIcon == 1"/>
          </div>
        </div>
      </div>

      <div class="photo-scan-warp" v-show="photoShow">
        <div class="photo-scan-box">
          <img :src="bankPhoto" class="photo-scan" onclick="return false"/>
          <span class="discern-scan">正在识别中...</span>
        </div>
      </div>

      <button class="sure-text" type="button" @click="nextProcess">下一步</button>

    </div>

    <!--驻厂已实名-->
    <div class="bank-unbind-content" v-if="showPage == 2">
      <div class="bank-real-info-box">
        <span class="real-mark">已实名</span>
        <!--TODO-->
        <div class="real-name-box">
          <span class="real-title">真实姓名：</span><span class="real-val">{{realName}}</span>
        </div>
        <div class="real-name-box">
          <span class="real-title">身份证号：</span><span class="real-val">{{realCert}}</span>
        </div>
      </div>
      <button class="sure-text" type="button" @click="realNextProcess">下一步</button>
    </div>


    <v-dialog v-model="modalVal" :content="content" type="default" @sure="hideCertAccpuy"></v-dialog>

  </div>
</template>

<script>
  import {getBase64, getNowFormatDate} from "../../../config/util";
  import {getBankAccessToken, getBankScan, queryCertIsAccupy} from "../../../axios/api";
  import {checkBankNameAndCert} from "../../../config/verify";
  import dialog from "../../../components/dialog";

  export default {
    data() {
      return {
        showPage: this.$route.query.showPage,
        photoShow: false,
        bankPhoto: "",
        userMark: "",
        assessToken: "",
        userName: "",
        userCert: "",
        nameIcon: 0,
        certIcon: 0,
        modalVal: false,
        content: "",
        realName: this.$route.query.proxy_bank_user_name,
        realCert: this.$route.query.proxy_bank_user_cert
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
      this.queryAccessToken();
    },
    methods: {
      queryAccessToken() {//获取银行卡扫描token
        let data = {
          "sgin": this.userMark
        };
        getBankAccessToken(data).then((res) => {
          if (res.code == 0) {
            this.assessToken = this.$decruption(res.data);
          }
        });
      },
      changePhoto(e) {//显示图片
        if (e.target.files.length > 0) {
          getBase64(e.target, (url) => {
            this.bankPhoto = 'data:image/png;base64,' + url;
            this.photoShow = true;
            setTimeout(() => {
              this.uploadBankPhoto();
            }, 50);
          })
        }
      },
      uploadBankPhoto() {//百度API识别
        this.$vux.loading.show({
          text: '加载中',
        });
        let image = this.bankPhoto.split(",")[1];
        let virValue = getNowFormatDate(this.userMark);
        let data = {
          "image": image,
          "id_card_side": "front",
          "accessToken": this.assessToken,
          "virValue": this.$encruption(virValue),
          "type": 1,
          "sgin": this.userMark
        };


        getBankScan(data).then((res) => {
          this.photoShow = false;
          this.bankPhoto = "";
          this.$vux.loading.hide();
          if (res.code == 0) {
            let certInfo = res.data;
            if (certInfo.name.words == "" && certInfo.IdCard.words == "") {
              this.$vux.toast.text("扫描失败，请重新扫描！", "middle");
              return;
            } else {
              this.userName = certInfo.name.words;
              this.userCert = certInfo.IdCard.words;
            }
          }else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });

      },
      checkScanName() {//校验姓名
        let reg1 = /^[\u2E80-\u9FFF]+$/;
        if (!reg1.test(this.userName)) {
          this.nameIcon = 1;
        } else {
          this.nameIcon = 0;
        }
      },
      checkScanCert() {//校验身份证
        let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9Xx])$/;
        if (!reg.test(this.userCert)) {
          this.certIcon = 1;
        } else {
          this.certIcon = 0;
        }
      },
      nextProcess() {//下一步
        let certNum = this.userCert;
        let flag = checkBankNameAndCert(this.userName, certNum);
        if (flag) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let data = {
            "sgin": this.userMark,
            "identityNo": this.$encruption(certNum),
          };

          queryCertIsAccupy(data).then((res) => {//查询身份证是否被占用
            this.$vux.loading.hide();
            if (res.code == 20026) { //被占用
              this.content = res.msg;
              this.modalVal = true;
            } else if (res.data == 1) {
              this.$router.push({
                path: "/bankBindProcess2",
                query: {"userName": this.userName, "userCert": this.userCert, "showPage": 1}
              });
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        }
      },
      hideCertAccpuy() {//关闭占用弹出
        this.modalVal = false;
      },
      realNextProcess() {//已实名下一步
        this.$router.push({
          path: "/bankBindProcess2",
          query: {"userName": this.realName, "userCert": this.realCert, "showPage": 1, "realMark": 1}
        });
      }
    },
    components: {
      "v-dialog": dialog
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .bank-card-bind-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .process-box {
      .wh(100%, 2.4rem);
      margin-bottom: 0.267rem;
      .process1 {
        .wh(100%, 100%);
      }
    }
    .photo-upload-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(100%, 5.893rem);
      margin-bottom: 0.267rem;
      background: #FFF;
      .photo-box {
        position: relative;
        padding-top: 0.627rem;
        padding-bottom: 0.467rem;
        .wh(4.8rem, 3.2rem);
        .pic1 {
          .wh(100%, 100%);
        }
        .upload-file {
          position: absolute;
          left: 0;
          top: 0.627rem;
          .wh(4.8rem, 3.2rem);
          opacity: 0;
          -ms-filter: 'alpha(opacity=0)';
          z-index: 100;
        }
      }
      .tip1 {
        .size-color(0.427rem, rgba(53, 183, 255, 1));
        padding-bottom: 0.213rem;
      }
      .tip2 {
        .size-color(0.347rem, rgba(153, 153, 153, 1));
      }
    }
    .bank-real-info {
      margin-bottom: 0.8rem;
      .bank-real-name {
        .wh(100%, 1.333rem);
        background: #FFF;
        display: flex;
        .phone-box {
          margin-left: 0.32rem;
          display: flex;
          align-items: center;
          .wh(96.8%, 1.333rem);
          border-bottom: 0.027rem solid #f2f2f2;
          .title {
            .size-color(0.427rem, #333333);
          }
          .phone-con {
            margin-left: 0.467rem;
            .phone-num {
              .size-color(0.427rem, #333333)
            }
          }
          .pic2 {
            margin-left: auto;
            margin-right: 0.32rem;
            .wh(0.48rem, 0.48rem);
          }
        }

      }
    }
    .photo-scan-warp {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.5);
      .photo-scan-box {
        position: relative;
        width: 9.08rem;
        height: 5.92rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.107rem;
        .photo-scan {
          .wh(100%, 100%)
        }
        .discern-scan {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.48rem;
          color: #333;
          z-index: 100;
          font-weight: 500;
        }
      }
    }
    .sure-text {
      .fj(center, center);
      margin: 0 auto;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
    .bank-real-info-box {
      display: flex;
      flex-direction: column;
      .wh(100%, 2.933rem);
      margin-bottom: 0.8rem;
      background: #FFF;
      .real-mark {
        .fj(center, center);
        margin-left: 0.32rem;
        margin-bottom: 0.64rem;
        .wh(1.493rem, 0.533rem);
        background: rgba(60, 175, 255, 1);
        border-bottom-left-radius: 0.107rem;
        border-bottom-right-radius: 0.107rem;
        .size-color(0.347rem, rgba(255, 255, 255, 1));
      }
      .real-name-box {
        margin-left: 0.48rem;
        margin-bottom: 0.32rem;
        font-size: 0.427rem;
        .real-title {
          color: #999999;
        }
        .real-val {
          color: #333333;
        }
      }
    }
  }
</style>
